<template>
	<view v-if="dataForm.pk_id ? true : flase">
		<sww-swipe :list="swipeList" v-if="swipeList[0]?true:false" indicatorDots autoplay :height="194"></sww-swipe>
		<view class="parse_box"><u-parse :html="dataForm.details"></u-parse></view>
		<view class="title_box">
			<view class="vertical"></view>
			<view class="title">爆款产品</view>
		</view>
		<prod-list :dataList="dataList"></prod-list>
		<sww-load-more :params="dataListParams"></sww-load-more>
		<sww-login></sww-login>
	</view>
</template>

<script>
import { pagingMixin } from '@/mixins/pagingMixin';
import prodList from '@/pagecomponents/prodList/index.vue';
export default {
	mixins: [pagingMixin],
	components: { prodList },
	data() {
		return {
			swipeList: [],
			dataForm: {}
		};
	},
	onLoad(options) {
		if (options && options.id) {
			this.$initPage(options.id);
		}
	},
	onReachBottom() {
		this._load_data({
			callBack: this.$formatData
		});
	},
	methods: {
		$initPage(id) {
			this._init_data(
				'GetProductBrandDetailed',
				{ pk_id: id },
				{
					callBack: this.$formatData
				}
			);
		},
		$formatData(obj) {
			if (!this.dataForm.pk_id) {
				this.dataForm = {
					...obj,
					product: null
				};
				this.swipeList = (obj.img || '').split(',').map(item => {
					return {
						img: item
					};
				});
			}
			return obj.product || [];
		}
	}
};
</script>

<style scoped lang="scss">
.parse_box {
	padding: 10rpx 20rpx;
}
.title_box {
	display: flex;
	align-items: center;
	padding: 20rpx 24rpx;
	.vertical {
		width: 8rpx;
		height: 26rpx;
		background: red;
		margin-right: 14rpx;
	}
	.title {
		line-height: 40rpx;
		flex: 1;
		overflow: hidden;
		color: #333;
		font-size: 34rpx;
		font-weight: bold;
	}
}
</style>
